import React, { memo } from "react"
import type { FC, ReactNode } from "react"
import SectionHeaderV2 from "@/components/SectionHeaderV2"
import { useAppSelector } from "@/store"
import { formatImageUrl } from "@/utils/format"
import "./index.less"
import { shallowEqual } from "react-redux"
interface IProps {
	children?: ReactNode
}

const SettleSingers: FC<IProps> = () => {
	const { artists } = useAppSelector(
		(state) => ({
			artists: state.recommend.artists,
		}),
		shallowEqual,
	)

	return (
		<div className="settleSingersContainer">
			<SectionHeaderV2 title="入驻歌手" moreTxt="查看全部 &gt;" moreLink="#/discover/artist" />
			<div className="artists">
				{artists.map((item) => {
					return (
						<a href="#/discover/artist" className="item" key={item.id}>
							<img src={formatImageUrl(item.picUrl, 80)} alt="" />
							<div className="info">
								<div className="name">{item.name}</div>
								<div className="alia">{item.alias.join(" ")}</div>
							</div>
						</a>
					)
				})}
			</div>
			<div className="apply-for">
				<a href="#/">申请成为网易音乐人</a>
			</div>
		</div>
	)
}

export default memo(SettleSingers)
